<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .window{
            width:550px;
            background-color:#d0def0;
            position:absolute;
            padding:2px;
            margin:5px;
            display:none;
        }
        .content{
            height:150px;
            background-color:#FFF;
            font-size:14px;
            overflow:auto;
        }
        .title{
            padding:2px;
            color:#0CF;
            font-size:14px;
        }

    </style>
</head>
<body>
<!--    <button type="button" onclick="subwindow()">KK</button>-->

<div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
<!--    <input type="button" value="居中窗口" id="btn_center" />-->
    <button type="button" onclick="popCenterWindow()">居中窗口</button>
</div>
<div class="window" id="center">
    <div id="title" class="title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />计划 博客园-居中窗口</div>
    <div class="content">jihua.cnblogs.com</div>
</div>
<!--    <script>-->
<!--        $(document).ready(function () {-->
<!--            $("#btn_center").click(function () {-->
<!--                popCenterWindow();-->
<!--            });-->
<!--        });-->
<!--        // function subwindow(){-->
<!--        //     // window.open("https://baidu.com", "_blank",'height=200,width=400,status=yes,top=200,left=400,' +-->
<!--        //     //     'toolbar=no,menubar=no,location=no,status=no,location=no')-->
<!--        //     window.open('userlist.html','_blank','width=400,height=100,menubar=no,toolbar=no,' +-->
<!--        //         'location=no,directories=no,status=no,scrollbars=no,resizable=no')-->
<!--        // }-->
<!--    </script>-->

<script type="text/javascript">
    //获取窗口的高度
    var windowHeight;
    //获取窗口的宽度
    var windowWidth;
    //获取弹窗的宽度
    var popWidth;
    //获取弹窗高度
    var popHeight;
    function init(){
        windowHeight=$(window).height();
        windowWidth=$(window).width();
        popHeight=$(".window").height();
        popWidth=$(".window").width();
    }
    //关闭窗口的方法
    function closeWindow(){
        $(".title img").click(function(){
            $(this).parent().parent().hide("slow");
        });
    }
    //定义弹出居中窗口的方法
    function popCenterWindow(){
        init();
        //计算弹出窗口的左上角Y的偏移量
        var popY=(windowHeight-popHeight)/2;
        var popX=(windowWidth-popWidth)/2;
        //alert('jihua.cnblogs.com');
        //设定窗口的位置
        $("#center").css("top",popY).css("left",popX).slideToggle("slow");
        closeWindow();
    }
</script>
</body>
</html>